﻿<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <base th:href="${#request.getContextPath()}+'/'">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <!--[if lt IE 9]>
    <script type="text/javascript" src="lib/html5shiv.js"></script>
    <script type="text/javascript" src="lib/respond.min.js"></script>
    <![endif]-->
    <link rel="stylesheet" type="text/css" href="static/h-ui/css/H-ui.min.css"/>
    <link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/H-ui.admin.css"/>
    <link rel="stylesheet" type="text/css" href="lib/Hui-iconfont/1.0.8/iconfont.css"/>
    <link rel="stylesheet" type="text/css" href="static/h-ui.admin/skin/default/skin.css" id="skin"/>
    <link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/style.css"/>
    <!--[if IE 6]>
    <script type="text/javascript" src="lib/DD_belatedPNG_0.0.8a-min.js"></script>
    <script>DD_belatedPNG.fix('*');</script>
    <![endif]-->
    <title>建材列表</title>
    <link rel="stylesheet" href="lib/zTree/v3/css/zTreeStyle/zTreeStyle.css" type="text/css">
</head>
<body class="pos-r">
<div class="pos-a"
     style="width:200px;left:0;top:0; bottom:0; height:100%; border-right:1px solid #e5e5e5; background-color:#f5f5f5; overflow:auto;">
    <ul id="treeDemo" class="ztree"></ul>
</div>
<div style="margin-left:200px;">
    <nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span> 产品管理 <span
            class="c-gray en">&gt;</span> 产品列表 <a class="btn btn-success radius r"
                                                  style="line-height:1.6em;margin-top:3px"
                                                  href="javascript:location.replace(location.href);" title="刷新"><i
            class="Hui-iconfont">&#xe68f;</i></a></nav>
    <div class="page-container">
        <form action="/good/findGoodsByParam" method="post">
            <div class="text-c">
                <!--日期范围： <input type="text" onfocus="WdatePicker({ maxDate:'#F{$dp.$D(\'logmax\')||\'%y-%M-%d\'}' })" id="logmin"
                        class="input-text Wdate" style="width:120px;">
                 -
                 <input type="text" onfocus="WdatePicker({ minDate:'#F{$dp.$D(\'logmin\')}',maxDate:'%y-%M-%d' })"
                        id="logmax" class="input-text Wdate" style="width:120px;">-->

                <input type="text" name="goodName" id="" placeholder=" 产品名称" style="width:250px" class="input-text" value=""
                       th:value="${param.goodName}">
                <input type="hidden" id="selectedState" th:value="${param.state}">
                <select id="stateSelect" th:name="state" >
                    <option value="">--请选择--</option>
                    <option value="0">待审核</option>
                    <option value="1">已上架</option>
                    <option value="2">已下架</option>
                </select>
                <button n class="btn btn-success"  id="btnSelect" type="submit"><i class="Hui-iconfont">&#xe665;</i> 搜产品
                </button>
            </div>
        </form>
        <div class="mt-20">
            <table class="table table-border table-bordered table-bg table-hover table-sort">
                <thead>
                <tr class="text-c">
                    <th width="40"><input name="" type="checkbox" value=""></th>
                    <th width="60">缩略图-图片1</th>
                    <th width="60">缩略图-图片2</th>
                    <th width="60">缩略图-图片3</th>
                    <th width="100">商品名称</th>
                    <th>描述</th>
                    <th width="60">发布状态</th>
                    <th width="100">操作</th>
                </tr>
                </thead>
                <tbody>
                <tr class="text-c va-m" th:each="good : ${goods}">
                    <td><input name="selectIds" type="checkbox" value=""></td>
                    <td><img th:src="${good.goodPic}" style="height: 50px;"/></td>
                    <td><img th:src="${good.goodPic1}" style="height: 50px;"/></td>
                    <td><img th:src="${good.goodPic2}" style="height: 50px;"/></td>
                    <td class="text-l"><a style="text-decoration:none"
                                          href="javascript:;">
                        <b class="text-success" th:text="${good.goodName}"></td>
                    <td class="text-l" th:text="${good.promoteDesc}">
                        原木的外在,实木条形结构,色泽花纹自然,写意;款式设计吸取实木地板的天然去雕饰之美,在视觉上给人带来深邃联想.多款产品适合搭配不同的风格的室内装饰;功能流露出尊贵典雅的大气韵味。
                    </td>
                    <td class="td-status"><span class="label label-success radius"><label th:text="${good.stateStr}"> 已发布</label></span>
                    </td>
                    <td class="td-manage">
                        <a style="text-decoration:none"
                           th:onclick="javascript:product_oper(this,[[${good.goodId}]],[[${good.state}]])"
                           href="javascript:;" title="下架">
                            <i class="Hui-iconfont">&#xe6de;</i>
                        </a>
                        <a style="text-decoration:none" class="ml-5"
                           onClick="product_edit('产品编辑','product-add.html','10001')"
                           href="javascript:;" title="编辑">
                            <i class="Hui-iconfont">&#xe6df;</i>
                        </a>
                        <a style="text-decoration:none" class="ml-5"
                           onClick="product_del(this,'10001')"
                           href="javascript:;" title="删除">
                            <i class="Hui-iconfont">&#xe6e2;</i>
                        </a>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="lib/layer/2.4/layer.js"></script>
<script type="text/javascript" src="static/h-ui/js/H-ui.min.js"></script>
<script type="text/javascript" src="static/h-ui.admin/js/H-ui.admin.js"></script> <!--/_footer 作为公共模版分离出去-->

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="lib/zTree/v3/js/jquery.ztree.all-3.5.min.js"></script>
<script type="text/javascript" src="lib/My97DatePicker/4.8/WdatePicker.js"></script>
<script type="text/javascript" src="lib/datatables/1.10.0/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="lib/laypage/1.2/laypage.js"></script>
<script type="text/javascript">
    var setting = {
        view: {
            dblClickExpand: false,
            showLine: false,
            selectedMulti: false
        },
        data: {
            simpleData: {
                enable: true,
                idKey: "id",
                pIdKey: "pId",
                rootPId: ""
            }
        },
        callback: {
            beforeClick: function (treeId, treeNode) {
                var zTree = $.fn.zTree.getZTreeObj("tree");
                if (treeNode.isParent) {
                    zTree.expandNode(treeNode);
                    return false;
                } else {
                    //demoIframe.attr("src",treeNode.file + ".html");
                    return true;
                }
            }
        }
    };

    var zNodes = [
        {id: 1, pId: 0, name: "一级分类", open: true},
        {id: 11, pId: 1, name: "二级分类"},
        {id: 111, pId: 11, name: "三级分类"},
        {id: 112, pId: 11, name: "三级分类"},
        {id: 113, pId: 11, name: "三级分类"},
        {id: 114, pId: 11, name: "三级分类"},
        {id: 115, pId: 11, name: "三级分类"},
        {id: 12, pId: 1, name: "二级分类 1-2"},
        {id: 121, pId: 12, name: "三级分类 1-2-1"},
        {id: 122, pId: 12, name: "三级分类 1-2-2"},
    ];


    $(document).ready(function () {
        var t = $("#treeDemo");
        t = $.fn.zTree.init(t, setting, zNodes);
        //demoIframe = $("#testIframe");
        //demoIframe.on("load", loadReady);
        var zTree = $.fn.zTree.getZTreeObj("tree");
        //zTree.selectNode(zTree.getNodeByParam("id",'11'));
    });


    /*产品-添加*/
    function product_add(title, url) {
        var index = layer.open({
            type: 2,
            title: title,
            content: url
        });
        layer.full(index);
    }

    /*产品-查看*/
    function product_show(title, url, id) {
        var index = layer.open({
            type: 2,
            title: title,
            content: url
        });
        layer.full(index);
    }

    /*产品-审核*/
    function product_shenhe(obj, id) {
        layer.confirm('审核文章？', {
                btn: ['通过', '不通过'],
                shade: false
            },
            function () {
                $(obj).parents("tr").find(".td-manage").prepend('<a class="c-primary" onClick="product_start(this,id)" href="javascript:;" title="申请上线">申请上线</a>');
                $(obj).parents("tr").find(".td-status").html('<span class="label label-success radius">已发布</span>');
                $(obj).remove();
                layer.msg('已发布', {icon: 6, time: 1000});
            },
            function () {
                $(obj).parents("tr").find(".td-manage").prepend('<a class="c-primary" onClick="product_shenqing(this,id)" href="javascript:;" title="申请上线">申请上线</a>');
                $(obj).parents("tr").find(".td-status").html('<span class="label label-danger radius">未通过</span>');
                $(obj).remove();
                layer.msg('未通过', {icon: 5, time: 1000});
            });
    }

    function product_oper(obj, id, state) {
        if (state == 0) {//待审核
            product_start(obj, id);
        } else if (state == 1) {//已上架
            product_stop(obj, id);
        } else if (state == 2) {// 已下架
            product_start(obj, id);
        }
    }

    /*产品-下架*/
    function product_stop(obj, id) {
        layer.confirm('确认要下架吗？', function (index) {
            //当点击确定时，则进入到方法体中
            //如果进入到当前这个方法体中则可以执行相应的操作
            $.get("/good/updateStateByGoodId?goodId=" + id + "&state=2", function (data) {
                if (data.success) {
                    $(obj).parents("tr").find(".td-manage").prepend('<a style="text-decoration:none" onClick="product_start(this,id)" href="javascript:;" title="发布"><i class="Hui-iconfont">&#xe603;</i></a>');
                    $(obj).parents("tr").find(".td-status").html('<span class="label label-defaunt radius">已下架</span>');
                    $(obj).remove();
                    layer.msg('已下架!', {icon: 5, time: 1000});

                    if($("#goodName").val()==undefined){
                        window.location.href = "good/findGoodsByParam"
                    }else {
                        window.location.href = "good/findGoodsByParam?goodName="+$("#goodName").val();
                    }

                } else {
                    alert(data.message);
                }
            });

        });
    }

    /*产品-发布*/
    function product_start(obj, id) {
        layer.confirm('确认要上架吗？', function (index) {
            $.get("/good/updateStateByGoodId?goodId=" + id + "&state=1", function (data) {
                if (data.success) {
                    $(obj).parents("tr").find(".td-manage").prepend('<a style="text-decoration:none" onClick="product_stop(this,id)" href="javascript:;" title="下架"><i class="Hui-iconfont">&#xe6de;</i></a>');
                    $(obj).parents("tr").find(".td-status").html('<span class="label label-success radius">已上架</span>');
                    $(obj).remove();
                    layer.msg('已上架!', {icon: 6, time: 1000});


                    if($("#goodName").val()==undefined){
                        window.location.href = "good/findGoodsByParam"
                    }else {
                        window.location.href = "good/findGoodsByParam?goodName="+$("#goodName").val();
                    }


                } else {
                    alert(data.message);

                }
            });
        });
    }

    /*产品-申请上线*/
    function product_shenqing(obj, id) {
        $(obj).parents("tr").find(".td-status").html('<span class="label label-default radius">待审核</span>');
        $(obj).parents("tr").find(".td-manage").html("");
        layer.msg('已提交申请，耐心等待审核!', {icon: 1, time: 2000});
    }

    /*产品-编辑*/
    function product_edit(title, url, id) {
        var index = layer.open({
            type: 2,
            title: title,
            content: url
        });
        layer.full(index);
    }

    /*产品-删除*/
    function product_del(obj, id) {
        layer.confirm('确认要删除吗？', function (index) {
            $.ajax({
                type: 'POST',
                url: '',
                dataType: 'json',
                success: function (data) {
                    $(obj).parents("tr").remove();
                    layer.msg('已删除!', {icon: 1, time: 1000});
                },
                error: function (data) {
                    console.log(data.msg);
                },
            });
        });
    }
</script>
<script type="text/javascript">
    $(function () {//jquery语法：界面加载完成后，才会加载代码块的JS脚本
        //1. 先获取 select的所有child元素
        $("#stateSelect option").each(function () {
            //2. 循环每个child元素，获取它的value属性的值
            if ($("#selectedState").val() == $(this).val()) {
                //3. 将这个属性的值 与 $("#state")埋比较，如果相等，则将当前这个child元素添加属性 ： selected='true'
                $(this).attr("selected", "true");
                return;
            }
        })


    })
</script>
</body>
</html>